import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_with_bmap/util/method_channel_util.dart';
import 'package:flutter_with_bmap/util/storage.dart';

class Setting extends StatefulWidget {
  const Setting({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return SettingState();
  }
}

class SettingState extends State<Setting> {
  bool tts = Storage.getBool("settings.tts") ?? false;
  String mapMode = Storage.getString("settings.mapMode") ?? "normal";
  bool mapFollow = Storage.getBool("settings.mapFollow") ?? false;
  String angleOfView = Storage.getString("settings.angleOfView") ?? "map";
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var activeBtn = BoxDecoration(
        border: Border.all(color: Theme.of(context).primaryColor),
        borderRadius: const BorderRadius.all(Radius.circular(5)),
        color: Theme.of(context).primaryColor);
    var inActiveBtn = BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: const BorderRadius.all(Radius.circular(5)));
    return Container(
        padding: EdgeInsets.fromLTRB(
            10, MediaQuery.of(context).padding.top + 10, 10, 10),
        child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          const Text("设置", style: SettingStyle.title),
          const Divider(),
          Container(
              margin: const EdgeInsets.only(top: 10, bottom: 10),
              padding: const EdgeInsets.only(left: 10),
              child: const Text("语音", style: SettingStyle.subTitle)),
          Container(
              padding: const EdgeInsets.all(10),
              decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(5))),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Text("语音播报", style: SettingStyle.fieldLabel),
                  CupertinoSwitch(
                      value: tts,
                      activeColor: Theme.of(context).primaryColor,
                      onChanged: (val) {
                        setState(() {
                          tts = val;
                        });
                        Storage.setBool("settings.tts", val);
                      })
                ],
              )),
          Container(
              margin: const EdgeInsets.only(top: 10, bottom: 10),
              padding: const EdgeInsets.only(left: 10),
              child: const Text("地图", style: SettingStyle.subTitle)),
          Container(
              padding: const EdgeInsets.all(10),
              decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(5))),
              child: Column(children: [
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Text("地图模式", style: SettingStyle.fieldLabel),
                      SizedBox(
                          width: 100,
                          child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                GestureDetector(
                                    onTap: () {
                                      setState(() {
                                        mapMode = "normal";
                                      });
                                      Storage.setString(
                                          "settings.mapMode", "normal");
                                      MethodChannelUtil.methodChannel
                                          .invokeMethod("setMapType", "normal");
                                    },
                                    child: Container(
                                      padding:
                                          const EdgeInsets.fromLTRB(8, 5, 8, 5),
                                      decoration: mapMode == "normal"
                                          ? activeBtn
                                          : inActiveBtn,
                                      child: Text(
                                        "普通",
                                        style: TextStyle(
                                            color: mapMode == "normal"
                                                ? Colors.white
                                                : Colors.black),
                                      ),
                                    )),
                                GestureDetector(
                                    onTap: () {
                                      setState(() {
                                        mapMode = "satellite";
                                      });
                                      Storage.setString(
                                          "settings.mapMode", "satellite");
                                      MethodChannelUtil.methodChannel
                                          .invokeMethod(
                                              "setMapType", "satellite");
                                    },
                                    child: Container(
                                        decoration: mapMode == "satellite"
                                            ? activeBtn
                                            : inActiveBtn,
                                        padding: const EdgeInsets.fromLTRB(
                                            8, 5, 8, 5),
                                        child: Text(
                                          "卫星",
                                          style: TextStyle(
                                              color: mapMode == "satellite"
                                                  ? Colors.white
                                                  : Colors.black),
                                        )))
                              ]))
                    ]),
                const Divider(),
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Text("地图跟随", style: SettingStyle.fieldLabel),
                      CupertinoSwitch(
                          value: mapFollow,
                          activeColor: Theme.of(context).primaryColor,
                          onChanged: (val) {
                            setState(() {
                              mapFollow = val;
                            });
                            Storage.setBool("settings.mapFollow", val);
                          })
                    ])
              ])),
          Container(
              margin: const EdgeInsets.only(top: 10, bottom: 10),
              padding: const EdgeInsets.only(left: 10),
              child: const Text("视角", style: SettingStyle.subTitle)),
          Container(
              padding: const EdgeInsets.all(10),
              decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(5))),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text("视角", style: SettingStyle.fieldLabel),
                    SizedBox(
                        width: 100,
                        child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              GestureDetector(
                                  onTap: () {
                                    setState(() {
                                      angleOfView = "map";
                                    });
                                    Storage.setString(
                                        "settings.angleOfView", "map");
                                  },
                                  child: Container(
                                    padding:
                                        const EdgeInsets.fromLTRB(8, 5, 8, 5),
                                    decoration: angleOfView == "map"
                                        ? activeBtn
                                        : inActiveBtn,
                                    child: Text(
                                      "地图",
                                      style: TextStyle(
                                          color: angleOfView == "map"
                                              ? Colors.white
                                              : Colors.black),
                                    ),
                                  )),
                              GestureDetector(
                                  onTap: () {
                                    setState(() {
                                      angleOfView = "vehicle";
                                    });
                                    Storage.setString(
                                        "settings.angleOfView", "vehicle");
                                  },
                                  child: Container(
                                      decoration: angleOfView == "vehicle"
                                          ? activeBtn
                                          : inActiveBtn,
                                      padding:
                                          const EdgeInsets.fromLTRB(8, 5, 8, 5),
                                      child: Text(
                                        "车辆",
                                        style: TextStyle(
                                            color: angleOfView == "vehicle"
                                                ? Colors.white
                                                : Colors.black),
                                      )))
                            ]))
                  ]))
        ]));
  }
}

class SettingStyle {
  static const title = TextStyle(fontWeight: FontWeight.bold, fontSize: 16);
  static const double subTitlePadLeft = 10;
  static const subTitle = TextStyle(fontSize: 16, color: Colors.grey);
  static const fieldLabel = TextStyle(fontSize: 18);
}
